<template>
  <div class="ServiceDet">
    <!-- 顶部页面标题栏 -->
    <!-- <div class="header">
        <div class="backIcon" @click="back">
          <img slot="icon" src="../../assets/transfer/backIcon.png" class="iconImage" />
        </div>
        <div class="theme">公告详情</div>
      </div>-->
    <!-- 页面主体信息区域 -->
    <div class="outermostMargin">
      <div class="msgBox">
        <div class="textBox">
          <div class="titles">
            <span class="mainTitle">{{detData.serviceName}}</span>
            <span class="time">{{detData.updateTime}}</span>
          </div>
        </div>
        <!-- <div class="imgBox" :style="'background-image: url('+picUrl(detData.url)+')'"></div> -->
        <!-- <div class="summary" v-if="$route.query.title == '找物业'"> -->
          <div class="summary" v-if="$route.query.title == '其他便民服务'">
          <p>联系人： {{detData.contacts}} </p>
          <p>联系电话： {{detData.servicePhone}} </p>
          <p>收费标准： {{detData.fees}}</p>
          <p>所属地区： {{detData.address}}</p>
          <p>备注：<span v-html="detData.serviceCase"></span></p>
        </div>
        <div class="summary" v-else-if="$route.query.title == '要购物'">
          <p class="item">联系人： {{detData.contacts}}</p>
          <p class="item">联系电话： {{detData.servicePhone}}</p>
          <p>咨询简述：</p>
          <span v-html="detData.serviceCase"></span>
        </div>
        <div class="summary" v-else-if="$route.query.title == '要出行'">
          <p class="item">运营起止时间：{{detData.fees}}</p>
          <p class="item">联系人： {{detData.contacts}}</p>
          <p class="item">联系电话： {{detData.servicePhone}}</p>
          <p>班次号：</p>
          <span v-html="detData.serviceCase"></span>
        </div>
        <div class="summary" v-else-if="$route.query.title == '找美食'">
          <p class="item">饭店联系人： {{detData.contacts}}</p>
          <p class="item">饭店联系电话： {{detData.servicePhone}}</p>
          <p>饭店简述：</p>
          <span v-html="detData.serviceCase"></span>
        </div>
        <div class="summary" v-else-if="$route.query.title == '找健康'">
          <p class="item">联系人： {{detData.contacts}}</p>
          <p class="item">机构联系电话： {{detData.servicePhone}}</p>
          <p>机构简述：</p>
          <span v-html="detData.serviceCase"></span>
        </div>
        <div class="summary" v-else-if="$route.query.title == '街坊电话本'">
          <p class="item">联系人： {{detData.contacts}}</p>
          <p class="item">服务联系电话： {{detData.servicePhone}}</p>
          <p>服务联系地址：</p>
          <p>备注：{{detData.remark}}</p>
          <span v-html="detData.serviceCase"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "ServiceDet",
    data() {
      return {
        det: {
          title: "详情页主题",
          createTime: "2019-11-11 11:26:00",
          url: "background-image: url('https://img.yzcdn.cn/vant/apple-1.jpg');",
          description: "测试正问行数不限制行的数量级内容省略，自动换行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行行"
        },
        detData: ""
      };
    },
    created() {
      this.detData = this.$route.query.detData;
      console.log("notice det", this.detData);
    },
    methods: {
      back() {
        this.$router.isBack = true; // 将返回状态置为触发态，以边路由监听触发返回动画
        this.$router.back(); // 路由向后退一步
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "~@/smobile.scss";
  .ServiceDet {
    .header {
      padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;
      position: absolute;
      width: $sm-img-per-max;
      height: 21px;
      background: $sm-bg-color;
      z-index: 2;
      display: flex;
      flex-direction: row nowrap;
      justify-content: flex-start;
      .backIcon {
        position: absolute;
        white-space: nowrap;
        height: $sm-icon-px-md;
        z-index: 4;
        .iconImage {
          height: $sm-icon-px-md;
          width: $sm-icon-px-md;
          transform: rotateY(180deg);
        }
      }
      .theme {
        position: absolute;
        font-weight: bold;
        width: $sm-img-per-max;
        text-align: center;
        white-space: nowrap;
        z-index: 3;
      }
    }
    .outermostMargin {
      padding: $sm-spaceing-block-base;
      background: $sm-bg-color;
      color: $sm-text-color;
      font-size: $sm-font-size-lg;
      overflow: auto;
      height: 100vh; // margin: 41px 0 0 0;
      .msgBox {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        .textBox {
          .titles {
            display: flex;
            flex-direction: column;
            margin: $sm-spacing-col-xl 0 0 0;
            .mainTitle {
              font-size: $sm-font-size-title;
              font-weight: bold;
              color: $sm-color-title;
              text-align: center;
            }
            .time {
              padding: $sm-spacing-col-sm 0 $sm-spacing-col-sm 0;
              color: $sm-text-color-grey;
              font-size: $sm-font-size-lg;
              text-align: center;
            }
          }
        } // .imgBox {
        //   width: $sm-img-per-max;d
        //   height: $sm-img-size-maxp;
        //   background-repeat: no-repeat;
        //   background-size: cover;
        // }
        .summary {
          margin: $sm-spacing-col-lg 0 $sm-spacing-col-lg 0;
          color: $sm-color-title;
        }
      }
    }
  }
</style>